import { useState } from 'react'
import { useEventEmitter, useRequest, useSize } from 'ahooks'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { ProjectListTem, ChartsDat } from '../Template'
import { Gauge, Pie } from '@ant-design/plots'

import { PieTemplate } from '../Template'

import { project } from '../../../../Common/Data'
import { Http } from '../../../../Common/Api'
import { FrontModalBox } from '../../Assets/Modal'
import { ICON } from '../../../../Common/Configure/Icon'
import { useRef } from 'react'

import { LineConfigA01Template } from '../../Assets/Template/AssetsCharts'

const style = {
    ColumnColor: '#90EE7E&#97D9FF&#FFCF27&#FF6643',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
}

const { imageUrl } = project[window.location.hostname]

const A01Color = ['rgba(143, 237, 125, 1)', 'rgba(151, 217, 255, 1)', 'rgba(255, 206, 39, 1)', 'rgba(255, 102, 67, 1)']

export const ThrA01 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [OptionsCall, setOptionsCall] = useState()

    const [DataA01, setDataA01] = useState()
    const [ChartA01, setChartA01] = useState()
    const [DataA02, setDataA02] = useState()

    const [DataA03, setDataA03] = useState()

    const [DataA04, setDataA04] = useState({ 一般: 0, 较大: 0, 重大: 0 })
    const [DataA05, setDataA05] = useState({ 安全教育人次: 0, 安全教育活动: 0, 安全活动人次: 0, 安全活动活动: 0 })

    const A01Data = [
        { uuid: 1, label: '低风险', value: 'A01', unit: '次' },
        { uuid: 2, label: '一般风险', value: 'A02', unit: '次' },
        { uuid: 3, label: '较大风险', value: 'A03', unit: '次' },
        { uuid: 4, label: '重大风险', value: 'A04', unit: '次' },
    ]

    const A02List = [
        { uuid: 1, color: '#00F2DC', label: '下单数', value: 'submittedCount', unit: '个', img: 'ThrA0201.png' },
        { uuid: 2, color: '#37D4F2', label: '已整改', value: 'handledCount', unit: '个', img: 'ThrA0202.png' },
        { uuid: 3, color: '#FFEE8C', label: '未整改', value: 'unSubmittedCount', unit: '个', img: 'ThrA0203.png' },
        { uuid: 4, color: '#71FFE4', label: '整改中', value: 'handlingCount', unit: '个', img: 'ThrA0204.png' },
    ]
    const A02Data = [
        { uuid: 1, color: '#00F25A', label: '合格数', value: 'okCount', unit: '个', img: 'ThrA0205.png' },
        { uuid: 2, color: '#FFA750', label: '不合格', value: 'notOkCount', unit: '个', img: 'ThrA0206.png' },
    ]

    const A03Data = [
        { uuid: 1, label: '一般隐患', value: '一般', img: 'ListA0301.png' },
        { uuid: 2, label: '较大隐患', value: '较大', img: 'ListA0302.png' },
        { uuid: 3, label: '重大隐患', value: '重大', img: 'ListA0303.png' },
    ]
    const A04Data = [
        { uuid: 1, label: '安全教育', value: '安全教育活动', img: 'ThrA04B1.png' },
        { uuid: 2, label: '安全活动', value: '安全活动活动', img: 'ThrA04B2.png' },
        { uuid: 3, label: '教育人次', value: '安全教育人次', img: 'ThrA04B3.png' },
        { uuid: 4, label: '活动人次', value: '安全活动人次', img: 'ThrA04B4.png' },
    ]

    const { runAsync: A01run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = {}
            let chart = []
            res.forEach(({ riskLevel, num }) => {
                chart = [...chart, { type: riskLevel, value: num }]
                if (riskLevel === '低风险') data.A01 = num
                if (riskLevel === '一般风险') data.A02 = num
                if (riskLevel === '较大风险') data.A03 = num
                if (riskLevel === '重大风险') data.A04 = num
            })
            setDataA01(data)
            setChartA01(chart)
        },
    })
    const { runAsync: A02run } = useRequest(Http, { manual: true, onSuccess: res => setDataA02(res) })

    const { runAsync: A03run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ month, riskLevel, riskLevelCount }) => ({
                name: riskLevel,
                type: month,
                value: riskLevelCount,
            }))
            setDataA03(data)
        },
    })
    const { runAsync: A04run } = useRequest(Http, { manual: true, onSuccess: res => setDataA04(res) })
    const { runAsync: A05run } = useRequest(Http, { manual: true, onSuccess: res => setDataA05(res) })
    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        MapClickEvent.emit({ uuid: val, type: 'Supervise' })
    })

    const MapClickEvent = useEventEmitter()
    MapClickEvent.useSubscription(val => {
        if (val.type === 'Supervise') {
            const { uuid: organizationUuid } = val
            A01run({ url: 'getGJriskLevelStat', data: { organizationUuid } })
            A02run({ url: 'getGJsecurityStat', data: { organizationUuid } })
            A03run({ url: 'getRiskLevelMonthStatByYear', data: { organizationUuid } })
            A04run({ url: 'getSecurityStatByProblem', data: { organizationUuid } })
            A05run({ url: 'getSecurityActivityTypeStat', data: { organizationUuid } })
        }
    })

    return (
        <>
            <div className="left">
                <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            </div>
            <div className="right">
                <div className="top">
                    <CommonSmallTitle title="风险管理" flex={3} style={{ marginRight: 16 }}>
                        <div className="A01">
                            <div className="Charts">
                                {ChartA01 && (
                                    <Pie
                                        {...PieTemplate({
                                            data: ChartA01,
                                            color: A01Color,
                                            size: 240,
                                        })}
                                    />
                                )}
                            </div>
                            <div className="List">
                                {A01Data.map(({ uuid, label, value, unit }, index) => (
                                    <div key={uuid} style={{ '--color': A01Color[index] }}>
                                        <div>{ICON['IconBianzu']}</div>
                                        <div>{label}</div>
                                        <div>
                                            {DataA01 && DataA01[value]}
                                            {unit}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </CommonSmallTitle>
                    <CommonSmallTitle title="风险管理按月走势图" flex={2}>
                        <div className="A03" ref={ChartsBox}>
                            {size && DataA03 && <LineConfigA01Template data={DataA03} size={size} style={style} />}
                        </div>
                    </CommonSmallTitle>
                </div>
                <div className="btm">
                    <CommonSmallTitle title="隐患排查治理" flex={1164} style={{ marginRight: 16 }}>
                        <div className="A02">
                            <div className="ListA01">
                                {A02List.map(({ uuid, label, value, unit, color, img }) => (
                                    <div key={uuid}>
                                        <img src={imageUrl + img} alt="" />
                                        <div style={{ color }}>{label}</div>
                                        <div>
                                            {DataA02 && DataA02[value]}
                                            {unit}
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div className="ListA02">
                                {DataA02 && (
                                    <Gauge
                                        {...ChartsDat({
                                            size: { width: 200, height: 100 },
                                            percent: (() => {
                                                const {
                                                    handlingCount,
                                                    okCount,
                                                    notOkCount,
                                                    handledCount,
                                                    submittedCount,
                                                } = DataA02
                                                const one =
                                                    handlingCount + notOkCount + okCount + handledCount + submittedCount

                                                return okCount / one || 0
                                            })(),
                                            title: '合格率',
                                        })}
                                    />
                                )}
                                <div className="List">
                                    {A02Data.map(({ uuid, label, value, unit, color, img }) => (
                                        <div key={uuid}>
                                            <img src={imageUrl + img} alt="" />
                                            <div style={{ color }}>{label}</div>
                                            <div>
                                                {DataA02 && DataA02[value]}
                                                {unit}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            <div className="ListA03">
                                {A03Data.map(({ uuid, label, value, img }) => (
                                    <div key={uuid}>
                                        <img src={imageUrl + img} alt="" />
                                        <div>
                                            <div>{label}</div>
                                            <div>{DataA04[value]}</div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </CommonSmallTitle>
                    <CommonSmallTitle title="安全活动管理" flex={216}>
                        <div className="A04">
                            {A04Data.map(({ uuid, label, value, img }) => (
                                <div key={uuid}>
                                    <img src={imageUrl + img} alt="" />
                                    <div>
                                        <div>{label}</div>
                                        <div>{DataA05[value]}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </CommonSmallTitle>
                </div>
            </div>

            <FrontModalBox OptionsCall={OptionsCall} />
        </>
    )
}
